<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            background-color: turquoise;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>VUE中的修饰符</h1>
        <a href="./0319directive.html" @click="clickHandler">directive.html</a>
        <form action="" method="get">
            <input type="text" name="username" @keyup.esc.space="keyHandler">
        </form>
        <div @click="bigClick">
            <button @click.stop.once="smallClick">点击</button>
        </div>
        <button @click.once="smallClick1">点击</button>
        <button @click.ctrl="ctrlClick" :class="{active: checkBtn}">ctrl+click</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                checkBtn: false
            },
            methods: {
                clickHandler(e){
                    e.preventDefault();
                },
                bigClick(){
                    console.log('big')
                },
                smallClick(){
                    console.log('small')
                },
                smallClick1(){
                    console.log('1111')
                },
                keyHandler(e){
                    console.log(e.keyCode);
                    if(e.keyCode == 13){
                        return false
                    }
                },
                ctrlClick(){
                    console.log('ctrlClick')
                    this.checkBtn = true
                }
            },
        })
    </script>
</body>
</html>